<template>
    <div>
        <div class="Topbar">
            <div class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
                <div class="mui-scroll">
                    <a v-for="item in TabList" :key="item.id"
                       v-text="item.title"
                       :class="['mui-control-item', item.id === 0 ? 'mui-active' : '']"
                       @click="getImgList(item.id)"
                    ></a>
                </div>
            </div>
        </div>
        <div class="ImgList">
           <ul>
                <router-link  :to="`photoInfo/${ item.id }`" v-for="item in ImgList" tag="li">
                    <img v-lazy="item.img_url">
                    <div class="info">{{ item.zhaiyao }}</div>
                </router-link>
            </ul>
        </div>
    </div>
</template>

<script>
    // 引入 mui js
    import mui from '../../lib/mui/js/mui.js'
    export default {
        data() {
            return {
                // 顶部列表
                TabList: [],
                // 分类的 id
                categoryId: 0,
                // 图片列表数据
                ImgList: []
            }
        },
        created() {
            // 获取分类数据
            this.getCates()
            // 获取图片列表数据 初始化 没有 传输 参数 默认 为 1
            this.getImgList()

        },
        mounted() {
            // scroll 生效 函数
            mui('.mui-scroll-wrapper').scroll()
        },
        methods: {
            // 获取全部分类数据
            getCates() {
                this.$http.get('api/getimgcategory')
                    .then(function (data) {
                        var data = data.body
                        // 数据获取失败
                        if (data.status !== 0) return  toastFn('数据列表获取失败')
                        // 获取成功
                        data.message.unshift({ title: '全部', id: 0 })
                        this.TabList = data.message
                    }, function () {
                        toastFn('Server error 500')
                    })
            },
            // 获取图片列表
            getImgList(id = 0) {
                this.ImgList = []
                // 判断 当前 id 是 否和 传输过来的 ID
                // 相同不做处理，不同 更新数据
                if (this.id === id) return
                this.id = id
                this.$http.get(`api/getimages/${ this.id }`)
                    .then(function (data) {
                        var data = data.body
                        if (data.status !== 0) return toastFn('图片数据获取失败')
                        this.ImgList = data.message
                    }, function () {
                        toastFn('Server error 500')
                    })
            }
        }
    }

    // 服务器错误 函数
    function toastFn (msg) {
        Toast({
            message: msg,
            position: 'middle',
            duration: 5000
        })
    }
</script>

<style scoped lang="less">
    .ImgList {
        ul {
            list-style: none;
            padding: 0 10px;
            margin: 0;
            margin-top: 10px;
            li {
                position: relative;
                img {
                    width: 100%;
                    margin-bottom: 15px;
                    box-shadow: 0 0 8px #000;
                    vertical-align: middle;
                }
                img[lazy=loading] {
                    width: 100%;
                    height: 300px;
                    margin: auto;
                }
                .info {
                    position: absolute;
                    bottom: 5px;
                    color: #fff;
                    font-size: 14px;
                    background-color: rgba(0, 0, 0, 0.4);
                    max-height: 110px;
                    overflow: hidden;
                }
            }
        }
    }
</style>